<!-- 洗衣详情 -->
<template>
  <div>
    <el-dialog v-model="dialogVisible" title="查看详情" width="600" :before-close="handleClose">
      <div class="box">
        <div>{{ data.title }}</div>
        <div>{{ data.content }}</div>
        <div class="imgs_box">
          <img v-for="item in img" :src="imgUrl + item.file" alt="" />
        </div>
        <div>{{ data.addTime }}发布</div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleClose">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { clothesGet } from "@/api/care/clothes/clothes";
import { clothesListData, pictures } from "@/api/care/clothes/type";

// 图片根路径
const imgUrl = import.meta.env.VITE_IMG_URL;

const dialogVisible = ref(true);

const props = defineProps({
  itemId: Number,
});
let id = props.itemId as number;

// 获取单条数据
let data = reactive<clothesListData>({
  id: 0,
  companyId: 0,
  elderlyId: 0,
  title: "",
  content: "",
  type: "",
  state: "",
  addTime: "",
  addAccountId: 0,
  addAccountName: "",
  begName: "",
  elderlyName: "",
  elderlyPhoto: "",
  elderlyGender: 0,
  elderlyIdCard: 0,
  houseName: "",
  buildingName: "",
  pictures: [],
});
const img = ref<pictures[]>([]);
const getData = async () => {
  let res = await clothesGet(id);
  // console.log(res);
  data = res;
  img.value = res.pictures;
};

// 关闭弹窗
const emit = defineEmits(["handelCloseItem"]);
const handleClose = () => {
  emit("handelCloseItem");
};

onMounted(() => {
  getData();
});
</script>

<style scoped lang="less">
.box {
  div {
    margin-bottom: 18px;
  }

  .imgs_box {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    img {
      width: 100px;
      height: 100px;
      margin-right: 10px;
    }
  }
}
</style>
